<script setup lang="ts">
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElButton, ElConfigProvider } from 'element-plus'
import FilePreview from './components/FilePreview.vue'
import 'element-plus/es/components/button/style/css'
import { useFilePreview } from './hooks/useFilePreview'
const { fileUrl, fileType, showFilePreview, handlePreView } = useFilePreview()
</script>

<template>
  <el-config-provider :locale="zhCn">
    <div style="text-align: center">
      <h3 class="mb20">文件预览 - 示例</h3>
      <el-button
        type="primary"
        size="default"
        @click="handlePreView('docx', '../../../public/1.docx')"
        >world - 预览</el-button
      >
      <el-button
        type="primary"
        size="default"
        @click="handlePreView('xlsx', '../../../public/1.xlsx')"
        >excel - 预览</el-button
      >
      <el-button
        type="primary"
        size="default"
        @click="handlePreView('pdf', '../../../public/1.pdf')"
        >pdf - 预览</el-button
      >
      <el-button
        type="primary"
        size="default"
        @click="handlePreView('img', 'http://www.capablist.com/CellFileOri/301179125613.jpeg')"
        >img - 预览</el-button
      >
    </div>
    <file-preview
      :fileUrl="fileUrl"
      :fileType="fileType"
      v-model:showFilePreview="showFilePreview"
    />
  </el-config-provider>
  
</template>

